<template>
    <div class=" overflow-scroll" style="background-color: var(--boxborder);">
        <div class="flex mt-20 w-[90%] px-[5%]  pb-10">
            <img src="@/src/1.gif" alt="封面" class="w-40 h-40 rounded-lg" :onload="onload(showList.coverImgUrl)">
            <div class="ml-5 w-full">
                <p class="text-xl font-bold">{{ showList.name }}</p>
                <p>作者:<span class="text-blue-500 px-4" title="网易云用户">{{ showList.creator.nickname }}</span></p>
                <p class="flex leading-4">标签:<span v-for="item in showList.tags" class="px-4 text-gray-500 leading-4">{{
                    item }}</span>
                </p>
                <p>简介:</p>
                <p style="text-indent:2rem;color:#777">
                    {{ setIntrduces(showList.description)[0] }}
                </p>
                <div>
                    <Icon name="" class="iconfont icon-tianjia text-red-500 ml-20 float-right mt-2" title="添加到收藏"
                        style="cursor: pointer;" @click="like"></Icon>
                </div>
            </div>
        </div>
        <!-- 歌曲列表 -->
        <div class="w-full mt-3 bg-gray-100 px-4 rounded-md" style="min-height: 150px;">
            <div class=" border-b-[1px] border-gray-300">
                <p><span class="font-bold leading-8 m-y">歌曲列表</span><span class="ml-2 text-xs">共{{
                    showList.tracks.length }}首</span>
                    <span class="float-right  leading-8 font-bold" @click="PushInPlayList"
                        style="cursor: pointer;">播放全部</span>
                </p>
            </div>
            <div class="w-full flex text-gray-500 text-sm h-8 mt-2">
                <p class="w-[33%]">歌曲</p>
                <p class="w-[31%]">专辑</p>
                <p class="w-[30%]">歌手</p>
                <p class="w-[4%]">时长</p>
            </div>
            <div v-for="item, index in showList.tracks" class="text-sm h-8 text-gray-500 even:bg-gray-200">
                <PublicMusicItem :name="item.name" :id="item.id" :album="item.al" :singer="item.ar" :index="index"
                    :time="item.dt" @dblclick="PlayMusic(index)" @click="pushitem(index)" />
            </div>

            <div class="h-4">
            </div>
        </div>
        <div class="h-8">
        </div>
    </div>
</template>

<script setup>
import { setIntrduces } from '~~/hook/format';
import { usePlayStore } from '~~/store';
import { useUserStore } from '~~/store/user';
import { useCollectionStore } from '~~/store/Collection';
const likes = useCollectionStore()
const store = usePlayStore()
const router = useRoute()
const user = useUserStore()
const { data } = await useFetch('/api/musiclist/getInfo', { query: { id: router.params.id } })
const showList = data.value?.data
const PushInPlayList = function () {
    let arr = []
    for (let i = 0; i < showList.tracks.length; i++) {
        let tempdata = {
            cover: showList.tracks[i].al.picUrl,
            name: showList.tracks[i].name,
            id: Number(showList.tracks[i].id),
            album: showList.tracks[i].al.name,
            dt: showList.tracks[i].dt,
            singer: showList.tracks[i].ar[0].name
        }
        arr.push(tempdata)
    }
    store.$patch({
        currentMusicIndex: 0,
        playList: arr, playStatus: true,
        currentId: showList.tracks[0].id
    })
}
const PlayMusic = function (item) {
    let arr = []
    for (let i = 0; i < showList.tracks.length; i++) {
        let tempdata = {
            cover: showList.tracks[i].al.picUrl,
            name: showList.tracks[i].name,
            id: Number(showList.tracks[i].id),
            album: showList.tracks[i].al.name,
            dt: showList.tracks[i].dt,
            singer: showList.tracks[i].ar[0].name
        }
        arr.push(tempdata)
    }
    store.$patch({
        currentMusicIndex: item,
        playList: arr, playStatus: true,
        currentId: showList.tracks[item].id
    })
}
const pushitem = function (item) {
    let tempdata = {
        cover: showList.tracks[item].al.picUrl,
        name: showList.tracks[item].name,
        id: showList.tracks[item].id,
        singer: showList.tracks[item].name,
        dt: showList.tracks[item].dt,
        album: showList.tracks[item].al.name,
    }
    store.pushMusic(tempdata);
    if (store.playList.length == 1) {
        store.$patch(() => {
            store.currentId = showList.tracks[item].id;
            store.playStatus = true;
        })
    }
}
const like = async () => {
    if (user.login) {
        const register = await useAsyncData('addlike', () => $fetch('/api/collection/addLike', { method: "post", body: { username: user.username, musicListid: showList.id, cover: showList.coverImgUrl, name: showList.name } }))
        if (register.data.value?.code == 200) {
            alert(register.data.value.message)
        } else {
            alert("添加失败")
        }
    } else {
        alert("需要登录")
    }
}
function onload(item) {
    return 'this.src=' + '"' + item + '";this.onload=null'
}
</script>